import React, { useRef, useEffect, useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, Text, Image, TouchableOpacity, FlatList, DatePickerAndroid } from 'react-native'
import { commonStyle } from 'styles'
import { ShortBar, InfoLayout } from 'components'
import assets from 'modules/assets'
import { tradeListStyle } from './styles'
import pos, { PosCustomer, PosGetInOutput } from 'api/pos';
import { operate } from 'services/authorization';

const TradeListScreen: NavigationStackScreenComponent<{ data: PosCustomer }> = props => {
	// const date = new Date();
	// const currentDate = useRef<{ year: number, month: number, day: number }>({
	// 	year: date.getFullYear(),
	// 	month: date.getMonth(),
	// 	day: date.getDay()
	// });
	const [posGetinList, setPosGetinList] = useState<PosGetInOutput[]>([])
	const [noData, setNoData] = useState(false)
	useEffect(() => {
		let customerData = props.navigation.getParam('data')
		if (customerData) {
			pos.posApp.getPosGetInListByCus({ ...customerData }).then(result => {
				result && setPosGetinList(result || [])
				setNoData(result.length < 1)
			})
		}
	}, [])

	return (
		<View style={[commonStyle.containerColumn, tradeListStyle.container]}>
			{/* <View style={[commonStyle.containerRow, tradeListStyle.timeContainer]}>
        <Text style={tradeListStyle.time}>2019</Text>
        <Text style={tradeListStyle.timeUnit}>年</Text>
        <Text style={tradeListStyle.time}>10</Text>
        <Text style={tradeListStyle.timeUnit}>月</Text>
        <Text style={tradeListStyle.time}>15</Text>
        <Text style={tradeListStyle.timeUnit}>日</Text>
			</View> */}
			{noData ? (<Text style={commonStyle.noDataWarn}>未找到交易记录，请确认用户信息是否正确！</Text>) :
				<FlatList
					style={tradeListStyle.container}
					data={posGetinList}
					renderItem={(item) => {
						return item.item.posGetIn ? (
							<TouchableOpacity
								onPress={() => {
									operate()
									props.navigation.navigate('TradeDetail', { posGetin: item.item })
								}}>
								<View
									key={item.index}
									style={[commonStyle.containerColumn, tradeListStyle.timeContainer]}>
									<ShortBar style={tradeListStyle.itemTitle} title={item.item.posGetIn.billNo} />
									<InfoLayout title="客户:" content={item.item.allCustomerName || ''} />
									<InfoLayout title="实收金额:" content={item.item.posGetIn.amount} />
									<InfoLayout title="收款时间:" content={`${item.item.posGetIn.date} ${item.item.posGetIn.time}`} />
								</View>
							</TouchableOpacity>
						) : ('')
					}}
				/>
			}
		</View>
	)
}

TradeListScreen.navigationOptions = props => {
	return {
		title: '交易明细',
		// headerRight: (
		//   <TouchableOpacity
		//     style={tradeListStyle.headerRightContainer}
		//     onPress={() => {
		//       // let currentDate = props.navigation.getParam('currentDate');
		//       DatePickerAndroid.open({
		//         date: new Date(),
		//       })
		//         .then(result => {
		//           // if (result.action !== DatePickerAndroid.dismissedAction) {
		//           // 	currentDate.current.year = result.year;
		//           // 	currentDate.current.month = result.month;
		//           // 	currentDate.current.day = result.day;
		//           // 	props.navigation.setParams({
		//           // 		currentDate
		//           // 	})
		//           // }
		//         })
		//         .catch(error => {})
		//     }}>
		//     <Image style={tradeListStyle.headerIcon} source={assets.images.icon_calendar} />
		//   </TouchableOpacity>
		// ),
	}
}

export default TradeListScreen
